<template>
  <div>
    <navs></navs>
    <div class="RSCNFT">
      <div>{{ $t("") }}</div>
      <!-- <div>{{ $t('home.subtitle1') }}</div>
      <div>{{ $t('home.desc1') }}</div> -->
      <div>{{ $t("news.news0") }}</div>
      <!-- <div>{{ $t("news.news1") }}</div> -->
      <div>&nbsp;&nbsp;&nbsp;&nbsp;{{ $t("news.news2") }}</div>
      <!-- <div>{{ $t("news.news3") }}</div>
      <div>{{ $t("news.news4") }}</div>
      <div>{{ $t("news.news5") }}</div> -->

      <div class="flex-ct btn" @click="goToPage">
        <span>{{ $t("home.btnGoToSynthesis") }}</span>
        <img
          src="../assets/image/home/newringht.png"
          class="newringht"
          alt=""
        />
      </div>
      <div class="line"></div>
    </div>

    <img src="../assets/image/home/Hero.png" class="Hero" alt="" />

    <div class="RSCNFT2">
      <div class="RSCNFT2tit">{{ $t("home.section1_title") }}</div>
      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section1_sub1") }}</div>
        <div>{{ $t("home.section1_item1") }}</div>
        <div>{{ $t("home.section1_item2") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section1_sub2") }}</div>
        <div>{{ $t("home.section1_item3") }}</div>
        <div>{{ $t("home.section1_item4") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section1_sub3") }}</div>
        <div>{{ $t("home.section1_item5") }}</div>
        <div>{{ $t("home.section1_item6") }}</div>
        <div>{{ $t("home.section1_item7") }}</div>
        <div class="line2"></div>
      </div>
      <img src="../assets/image/home/home1.png" class="home1" alt="" />
    </div>

    <div class="RSCNFT2 RSCNFT3">
      <div class="RSCNFT2tit">{{ $t("home.section2_title") }}</div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section2_sub1") }}</div>
        <div>{{ $t("home.section2_item1") }}</div>
        <div>{{ $t("home.section2_item2") }}</div>
        <div class="details">
          <div>{{ $t("home.section2_item3") }}</div>
          <div>{{ $t("home.section2_item4") }}</div>
          <div>{{ $t("home.section2_items") }}</div>
        </div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section2_sub2") }}</div>
        <div>{{ $t("home.section2_item5") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section2_sub3") }}</div>
        <div>{{ $t("home.section2_item6") }}</div>
        <div>{{ $t("home.section2_item7") }}</div>
        <div>{{ $t("home.section2_item8") }}</div>
        <div class="line2"></div>
      </div>
      <img src="../assets/image/home/home2.png" class="home1" alt="" />
    </div>

    <div class="RSCNFT4">
      <div class="title4">{{ $t("home.section3_title") }}</div>
      <div class="cont4">{{ $t("home.section3_desc") }}</div>
      <div class="line4"></div>
      <img src="../assets/image/home/home4.png" class="Hero" alt="" />
      <div class="tip">{{ $t("home.section3_tip") }}</div>
      <img src="../assets/image/home/home4-1.png" class="Hero " alt="" />
    </div>

    <div class="RSCNFT2">
      <div class="RSCNFT2tit">{{ $t("home.section4_title") }}</div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section4_sub1") }}</div>
        <div>{{ $t("home.section4_item1") }}</div>
        <div>{{ $t("home.section4_item2") }}</div>
        <div>{{ $t("home.section4_item3") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section4_sub2") }}</div>
      </div>
      <img src="../assets/image/home/home5.png" class="home1" alt="" />
    </div>

    <div class="RSCNFT2 RSCNFT3">
      <div class="RSCNFT2tit">{{ $t("home.section5_title") }}</div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section5_sub1") }}</div>
        <div>{{ $t("home.section5_item1") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section5_sub2") }}</div>
        <div>{{ $t("home.section5_item2") }}</div>
        <div>{{ $t("home.section5_item3") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section5_sub3") }}</div>
        <div>{{ $t("home.section5_item4") }}</div>
        <div class="line2"></div>
      </div>

      <img src="../assets/image/home/home6.png" class="home1" alt="" />
    </div>

    <div class="RSCNFT2 RSCNFT6">
      <div class="RSCNFT2tit">{{ $t("home.section6_title") }}</div>

      <div class="cont2">
        <div>{{ $t("home.section6_item1") }}</div>
        <div>{{ $t("home.section6_item2") }}</div>
        <div>{{ $t("home.section6_item3") }}</div>
        <div>{{ $t("home.section6_item4") }}</div>
        <div class="cont3">
          <div>{{ $t("home.section6_item5") }}</div>
          <div>{{ $t("home.section6_item6") }}</div>
          <div>{{ $t("home.section6_item7") }}</div>
          <div>{{ $t("home.section6_item8") }}</div>
          <div>{{ $t("home.section6_item9") }}</div>
          <div>{{ $t("home.section6_item10") }}</div>
          <div>{{ $t("home.section6_item11") }}</div>
          <div>{{ $t("home.section6_item12") }}</div>
          <div>{{ $t("home.section6_item13") }}</div>
          <div>{{ $t("home.section6_item14") }}</div>
        </div>
      </div>

      <img src="../assets/image/home/home7.png" class="home1" alt="" />
    </div>

    <div class="RSCNFT2">
      <div class="RSCNFT2tit">{{ $t("home.section7_title") }}</div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section7_sub1") }}</div>
        <div>{{ $t("home.section7_item1") }}</div>
        <div>{{ $t("home.section7_item2") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section7_sub2") }}</div>
        <div>{{ $t("home.section7_item3") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section7_sub3") }}</div>
        <div>{{ $t("home.section7_item4") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div class="cont2tit">{{ $t("home.section7_sub4") }}</div>
        <div>{{ $t("home.section7_item5") }}</div>
        <div class="line2"></div>
      </div>

      <img src="../assets/image/home/home8.png" class="home1" alt="" />
    </div>

    <div class="RSCNFT2 RSCNFT3">
      <div class="RSCNFT2tit">{{ $t("home.section8_title") }}</div>

      <div class="cont2">
        <div>{{ $t("home.section8_item1") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div>{{ $t("home.section8_item2") }}</div>
        <div class="line2"></div>
      </div>

      <div class="cont2">
        <div>{{ $t("home.section8_item3") }}</div>
        <div class="line2"></div>
      </div>

      <img src="../assets/image/home/home9.png" class="home1" alt="" />
      <div class="textbox">{{ $t("home.footer_text") }}</div>
    </div>

    <div class="flex-ct text2025">
      <div class="box2025">{{ $t("home.copyright") }}</div>
      <div>{{ $t("home.discord") }}</div>
      <div>{{ $t("home.telegram") }}</div>
      <div>{{ $t("home.twitter") }}</div>
    </div>
  </div>
</template>

<script>
import navs from "../components/nav.vue";
import tabble from "../components/tabble.vue";

export default {
  components: {
    navs,
    tabble,
  },
  data() {
    return {
      lximglist: [
        {
          icon: require("../assets/image/home/lx1.png"),
        },
        {
          icon: require("../assets/image/home/lx2.png"),
        },
        {
          icon: require("../assets/image/home/lx3.png"),
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    navigateTo(route) {
      this.$router.push({ path: route });
    },
    goToPage() {
      this.$router.push("/synthesis");
    },
  },
};
</script>
<style lang="less" scoped>
.RSCNFT {
  padding: 104px 46px 0 46px;
  font-size: 32px;
  > div {
    margin-bottom: 10px;
  }
  div:nth-child(2) {
    font-weight: 500;
    font-size: 80px;
    margin: 46px 0;
  }

  .btn {
    color: #ffffff;
    margin-top: 46px;
    padding: 22px 60px;
    background: #000000;
    border-radius: 200px;
    width: 366px;
  }
  .newringht {
    width: 19px;
    height: 18px;
  }
  .line {
    height: 2px;
    background: #f3f3f3;
    margin: 82px 0 52px;
  }
}
.Hero {
  width: 100%;
  height: auto;
}
.RSCNFT2 {
  padding: 96px 40px;
  background: #bdee63;

  .RSCNFT2tit {
    font-weight: 500;
    font-size: 44px;
  }
  .cont2 {
    padding: 60px 38px 0;
    line-height: 48px;

    .cont2tit {
      margin: 0 -38px;
      font-weight: 500;
      font-size: 32px;
      margin-bottom: 32px;
    }
    div {
      line-height: 48px;
    }
    .line2 {
      height: 2px;
      background: #a2d348;
      margin-top: 60px;
    }
    .cont3 {
      margin-left: 30px;
    }
  }
  .home1 {
    display: block;
    max-width: 600px;
    max-height: 600px;
    margin: 80px auto 40px;
  }
}
.RSCNFT3 {
  background: #0f0f0f !important;
  .cont2tit,
  .RSCNFT2tit {
    color: #fff !important;
  }
  .details {
    padding: 0 32px;
  }
  div {
    line-height: 48px;
    color: #c8c8c8 !important;
  }
}
.RSCNFT4 {
  padding: 96px 40px;
  text-align: center;

  .title4 {
    font-weight: 500;
    font-size: 44px;
  }
  .cont4 {
    font-size: 24px;
    margin-top: 60px;
  }
  .line4 {
    height: 2px;
    background: #a2d348;
    margin: 60px 30px;
  }
  .tip {
    font-size: 20px;
    color: #666666;
    margin: 16px 0 96px;
    text-align: left;
  }
}
.RSCNFT6 {
  background: #fff !important;
}
.textbox {
  font-size: 24px;
  color: #666666;
  line-height: 48px;
  margin-bottom: 300px;
}
.text2025 {
  background: #0f0f0f;
  font-size: 28px;
  color: #ffffff;
  padding: 80px 48px;
  .box2025 {
    font-size: 24px;
    color: #666666;
    margin-right: 40px;
  }
}
</style>
